<template>
  <div id="load">
    <div class="loader loader--style1" title="0">
      <svg
        id="mx_n_1722835890651"
        t="1722835890650"
        class="icon rotating-element"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="17886"
        width="200"
        height="200"
      >
        <path
          d="M309.76 87.573333c71.850667-8.96 125.76-8.96 161.685333 0 53.888 13.482667 127.914667 67.370667 128.128 161.706667 0.149333 60.608 20.224 87.552 13.482667 94.293333-20.074667-40.405333-47.146667-40.405333-74.112-40.405333-26.944 0-70.186667 2.688-134.869333-40.426667-53.888-35.925333-85.333333-94.314667-94.314667-175.146666z"
          fill="#B27AD8"
          p-id="17887"
        ></path>
        <path
          d="M671.082667 64.106667c57.173333 44.48 95.274667 82.56 114.325333 114.346666 28.586667 47.637333 42.816 138.090667-23.722667 204.928-42.773333 42.965333-47.637333 76.224-57.173333 76.224 14.4-42.773333-4.757333-61.930667-23.808-80.981333-19.050667-19.050667-51.541333-47.744-66.773333-123.946667-12.714667-63.530667 6.336-127.04 57.152-190.570666z"
          fill="#b888d8"
          p-id="17888"
        ></path>
        <path
          d="M943.146667 303.018667c9.002667 71.850667 9.002667 125.76 0 161.685333-13.461333 53.888-67.349333 127.914667-161.664 128.128-60.650667 0.149333-87.594667 20.224-94.314667 13.482667 40.405333-20.053333 40.405333-47.146667 40.405333-74.112 0-26.944-2.688-70.186667 40.426667-134.869334 35.925333-53.888 94.314667-85.333333 175.146667-94.314666z"
          fill="#CE95F5"
          p-id="17889"
        ></path>
        <path
          d="M966.613333 664.32c-44.458667 57.173333-82.56 95.296-114.325333 114.346667-47.637333 28.586667-138.090667 42.816-204.928-23.722667-42.965333-42.773333-76.224-47.637333-76.224-57.173333 42.773333 14.4 61.930667-4.757333 80.981333-23.808 19.050667-19.050667 47.744-51.541333 123.946667-66.773334 63.530667-12.714667 127.04 6.336 190.549333 57.152z"
          fill="#d69bff"
          p-id="17890"
        ></path>
        <path
          d="M727.722667 936.426667c-71.872 8.96-125.76 8.96-161.706667 0-53.866667-13.482667-127.914667-67.370667-128.128-161.706667-0.128-60.608-20.202667-87.552-13.461333-94.293333 20.053333 40.405333 47.146667 40.405333 74.090666 40.405333 26.965333 0 70.208-2.688 134.890667 40.426667 53.888 35.925333 85.333333 94.314667 94.293333 175.146666z"
          fill="#EBB0FF"
          p-id="17891"
        ></path>
        <path
          d="M366.4 959.893333c-57.173333-44.48-95.274667-82.56-114.346667-114.346666-28.565333-47.637333-42.794667-138.090667 23.744-204.928 42.773333-42.965333 47.637333-76.224 57.173334-76.224-14.4 42.773333 4.757333 61.930667 23.808 80.981333 19.050667 19.072 51.541333 47.744 66.773333 123.946667 12.714667 63.530667-6.336 127.04-57.173333 190.570666z"
          fill="#f0c4ff"
          p-id="17892"
        ></path>
        <path
          d="M94.314667 720.981333c-8.981333-71.850667-8.981333-125.76 0-161.685333 13.482667-53.888 67.370667-127.914667 161.685333-128.128 60.629333-0.149333 87.573333-20.224 94.314667-13.482667-40.426667 20.053333-40.426667 47.146667-40.426667 74.112 0 26.944 2.688 70.186667-40.405333 134.869334-35.946667 53.888-94.314667 85.333333-175.146667 94.314666z"
          fill="#FFCCFF"
          p-id="17893"
        ></path>
        <path
          d="M70.848 359.68c44.458667-57.173333 82.56-95.296 114.346667-114.346667 47.616-28.586667 138.069333-42.816 204.928 23.722667 42.965333 42.773333 76.224 47.637333 76.224 57.173333-42.794667-14.4-61.930667 4.757333-81.002667 23.808-19.050667 19.050667-47.722667 51.541333-123.946667 66.773334-63.509333 12.714667-127.018667-6.336-190.549333-57.152z"
          fill="#ffdbff"
          p-id="17894"
        ></path>
      </svg>
    </div>
  </div>
</template>
<style scoped lang="scss">
#load {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);

  .loader {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      width: 8rem;
      height: 8rem;
    }

    .rotating-element {
      animation: rotate 2s linear infinite; /* 这里的infinite表示无限次重复播放动画 */
    }
  }
}
</style>
